<template>
  <div class="yingmoo-register">
    <div class="header">
      <div class="header-main">
         <router-link :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/"><img src="../assets/ym-register/register-logo.png" /></router-link>
         <p>欢迎登录</p>
      </div>
    </div>
    <div class="main">
      <img src="../assets/ym-register/register-picture.png" class="register-picture" />
      <div class="register-model">
        <h3>账户登录</h3>
        <p><img v-if="warn_flag" src="../assets/ym-register/warn.png" />{{warning}}</p>
        <div class="register">
          <img src="../assets/ym-register/register-img.png" />
          <input v-model="user.name" type="text" placeholder="邮箱/用户名/已验证手机号" />
        </div>
        <div class="password">
          <img src="../assets/ym-register/password-img.png" />
          <input v-model="user.pwd" type="password" placeholder="密码" />
        </div>
        <div class="next">
          <input type="checkbox" id="next" />
          <label for="next">下次自动登录</label>
          <router-link tag="p" :class="{'router-link-exact-active': $route.name=='ymPassword'}" to="/ymPassword" class="p">忘记密码？</router-link>
        </div>
        <div class="btn_login" @click="test">
          立即登录
        </div>
        <router-link tag="p" :class="{'router-link-exact-active': $route.name=='ymEnroll'}" to="/ymEnroll" class="enroll">免费注册</router-link>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="w1200">
        <div class="copyright">
          <p>
            <span>Copyright @ 2012-2017</span>
            <span>北京鹰目网络科技有限公司</span>
            <span>京ICP备14044439号-1</span>
            <img src="../assets/ym-footer/icon-g.png" />
            <span>京公网安备 11010802020633号</span>
          </p>
          <p>
            <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
            <span>热线：400 650 7893</span>
            <span>传真：010-62681689/8248335</span>
          </p>
        </div>
        <div class="safety clearfix">
            <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
	data(){
		return{
			requestAddr:this.GLOBAL.addr,
			user:{},
			warning:null,
			warn_flag:false
		}
	},
	methods:{
		test:function(){
				if(this.user.name==''||this.user.name==null){
					this.warning = "请输入用户名！";
					this.warn_flag = true;
					return;
				}
				if(this.user.pwd==''||this.user.pwd==null){
					this.warning = "密码不可为空！"
					this.warn_flag = true;
					return;
				}
  			this.$http.post(this.requestAddr+"/Login/tologin",this.user,{emulateJSON: true}).then(
              (res)=>{
              	localStorage.setItem('user',JSON.stringify(res.data.user));
              	localStorage.setItem('level',JSON.stringify(res.data.level));
                if(res.data.code == 0){
                	let redirect = decodeURIComponent(this.$route.query.redirect || '/');
                  this.$router.push({//你需要接受路由的参数再跳转
                    path: redirect
                  });
                }else{
                	this.warn_flag = true;
                	this.warning = res.data.msg;
                }
              },
              (error)=>{
                console.log(error);
              }
        		);
  	}
	}

}
</script>

<style scoped lang="less">
  .yingmoo-register{
    width: 100%;
    .header{
      width: 100%;
      height: 62px;
      background-color: #036eb7;
      .header-main{
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        p{
          color: #81a6de;
          line-height: 62px;
          font-size: 14px;
        }
        img{
          width: 187px;
          height: 50px;
          margin-top: 5px;
        }
      }
    }
    .main{
      width: 1000px;
      height: 679px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      padding-top: 100px;
      .register-picture{
        width: 501px;
        height: 389px;
      }
      .register-model{
        width: 322px;
        height: 375px;
        border: 1px solid #dddddd;
        margin-top: 10px;
        h3{
          width: 280px;
          font-size: 23px;
          color: #f29600;
          text-align: center;
          margin: 0 auto;
          margin-top: 25px;
          line-height: 30px;
          border-bottom: 1px solid #dddddd;
        }
        p{
          color: #f29600;
          font-size: 12px;
          margin-left: 20px;
          line-height: 40px;
          margin-top: 6px;
        }
        .register{
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 20px;
          img{
            position: relative;
            top: 5px;
            left: 5px;
          }
          input{
            border: none;
            width: 245px;
            height: 33px;
            font-size: 14px;
            padding-left: 3px;
            margin-left: 5px;
            outline: none;
          }
        }
        .password{
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 20px;
          margin-top: 25px;
          img{
            position: relative;
            top: 5px;
            left: 5px;
          }
          input{
            border: none;
            width: 245px;
            height: 33px;
            font-size: 14px;
            padding-left: 3px;
            margin-left: 5px;
            outline: none;
          }
        }
        .next{
          margin-left: 20px;
          margin-top: 25px;
          label{
            font-size: 12px;
            color: #999999;
          }
          p{
            float: right;
            position: relative;
            top: -14px;
            right: 20px;
          }
          .p{
            cursor: pointer;
          }
        }
        .btn_login{
          width: 280px;
          height: 40px;
          background-color: #036eb7;
          color: white;
          font-size: 15px;
          line-height: 40px;
          margin-left: 20px;
          border-radius: 3px;
          margin-top: 25px;
          clear: both;
          text-align: center;
          cursor: pointer;
        }
        .enroll{
          width: 280px;
          text-align: right;
          color: #999999;
          font-size: 12px;
          line-height: 30px;
          cursor: pointer;
        }
      }
    }
    .footer-copyright {
      width: 100%;
      height: 108px;
      background: #1a1a1a;
      .w1200 {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .copyright {
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        p {
          display: flex;
          align-items: center;
        }
        span {
          margin-right: 10px;
        }
        img {
          margin-right: 3px;
        }
      }
      .safety a {
        float: left;
        margin-left: 12px;
        img {
          display: block;
        }
      }
    }
  }
</style>
